<template>
  <div class="student-info-container  userDfd">
    <div style="display: grid;grid-template-columns: 1fr 2fr;gap: 20px">
      <!-- 头部信息 -->
      <div class="student-header">
        <div @click="triggerUpload" class="avatar-box" :style="{ backgroundImage: `url(${studentData.userInfoVo.facePhoto || defaultAvatar})` }" style="display: flex ;justify-content: flex-end;">
          <div class="update-avatar-btn">更换照片</div>
        </div>
        <Imagetx ref="uploaderRef" v-model="studentData.userInfoVo.facePhoto"></Imagetx>
        <div style="display: flex;  flex-direction: column;justify-content: space-between;height: 200px">
          <h2>{{ studentData.name || studentData.userInfoVo.name }}
            <el-icon v-if="studentData.gender === 1" style="color:#6C96FF;">
              <Female/>
            </el-icon>
            <el-icon style="color:#cd1f7b;" v-else>
              <Male/>
            </el-icon>

          </h2>
          <div class="basic-header-info">
            <p>{{ getTextByCode('zzmm', studentData.userInfoVo.zzmm, '未知') }}</p>
            <!--<p style="color: #46668C">学号: {{ studentData.userNo }}</p>-->
          </div>
          <!--<div class="header-actions">-->
          <!--  <el-tag type="primary" size="large">班长</el-tag>-->
          <!--  <el-tag type="primary" size="large">语文课代表</el-tag>-->
          <!--  <el-tag type="primary" size="large">唱歌</el-tag>-->
          <!--</div>-->
        </div>
      </div>

      <!-- 基础信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
            <el-button v-if="!editingSection.userInfoVo" type="primary" link @click="startEdit('userInfoVo')">编辑</el-button>
            <div v-else>
              <el-button type="success" link @click="saveSection('userInfoVo')">保存</el-button>
              <!--<el-button type="danger" link @click="cancelEdit('userInfoVo')">取消</el-button>-->
            </div>
          </div>
        </template>
        <el-form :model="studentData" label-width="100px" :disabled="!editingSection.userInfoVo" :label-position="'top'">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="studentData.name" v-show="true" placeholder="请填写"/>
                <div v-show="false">{{ studentData.userInfoVo.name = studentData.name }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.gender === 1 ? '男' : '女' }}</div>
                <el-radio-group v-else v-model="studentData.gender">
                  <el-radio :label="1" style="height: 25px;">男</el-radio>
                  <el-radio :label="2" style="height: 25px;">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号">
                <el-input v-model="studentData.cardId " placeholder="未填写"/>
                <div v-show="false">{{ studentData.userInfoVo.cardId = studentData.cardId }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="出生年月日">
                <el-date-picker v-model="studentData.userInfoVo.sr" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式">
                <el-input v-model="studentData.cellPhone" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱">
                <el-input v-model="studentData.userInfoVo.email" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ getTextByCode('zzmm', studentData.userInfoVo.zzmm, '未知') }}</div>
                <el-select v-else v-model="studentData.userInfoVo.zzmm" placeholder="请选择政治面貌" style="width: 100%">
                  <el-option v-for="(item) in getDictOptionsNumber('zzmm')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入党时间">
                <el-date-picker v-model="studentData.userInfoVo.joinPartyDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯">
                <el-input v-model="studentData.userInfoVo.nativePlace" placeholder="未填写"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="民族">
                <el-input v-model="studentData.userInfoVo.nation" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参加工作时间">
                <el-date-picker v-model="studentData.userInfoVo.joinDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教工号">
                <el-input v-model="studentData.userNo" placeholder="未填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-row :gutter="20">-->
          <!--  <el-col :span="8">-->
          <!--    <el-form-item label="政治面貌">-->
          <!--      <div   style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo"   >{{getTextByCode('zzmm', studentData.userInfoVo.zzmm, '未知')}}</div>-->
          <!--      <el-select v-else v-model="studentData.userInfoVo.zzmm" placeholder="请选择政治面貌" style="width: 100%">-->
          <!--        <el-option v-for="(item) in getDictOptions('zzmm')" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--</el-row>-->
        </el-form>
      </el-card>


    </div>
    <div style="display: grid;grid-template-columns: 1fr 1fr;gap: 20px">


    </div>
    <div>
      <!-- 在校信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>在校信息</span>
          </div>
        </template>
        <el-form :model="studentData" label-width="100px" :disabled="!editingSection.userInfoVo" :label-position="'top'" class="rowForm">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="现单位">
                <el-input v-model="studentData.presentUnit" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="教职工类型">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ getTextByCode('positionType', studentData.positionType, '未填写') }}</div>
                <el-select v-else v-model="studentData.positionType" placeholder="未填写" style="width: 100%">
                  <el-option v-for="(item) in getDictOptionsNumber('positionType')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="编制所在单位">
                <el-input v-model="studentData.bzUnit" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入职时间">
                <el-date-picker v-model="studentData.joinDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任教学段">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ getTextByCode('teachingStage', studentData.teachingStage, '未填写') }}</div>
                <el-select v-else v-model="studentData.teachingStage" placeholder="未填写" style="width: 100%">
                  <el-option v-for="(item) in getDictOptions('teachingStage')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任教学科">
                <el-input v-model="studentData.subjectName" placeholder="未填写" :disabled="studentData.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现任行政职务">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ getTextByCode('position', studentData.position, '未填写') }}</div>
                <el-select v-else v-model="studentData.position" placeholder="未填写" style="width: 100%">
                  <el-option v-for="(item) in getDictOptionsNumber('position')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现任行政职务层次时间">
                <el-date-picker v-model="studentData.positionTime" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="心理咨询师">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.isMentalHealth === 1 ? '是' : '否 ' }}</div>
                <el-radio-group v-else v-model="studentData.isMentalHealth">
                  <el-radio :label="1" style="height: 25px;">是</el-radio>
                  <el-radio :label="2" style="height: 25px;">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否骨干教师">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.isBackbone === 1 ? '是' : '否 ' }}</div>
                <el-radio-group v-else v-model="studentData.isBackbone">
                  <el-radio :label="1" style="height: 25px;">是</el-radio>
                  <el-radio :label="2" style="height: 25px;">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="担任思政教师">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.isPolitics === 1 ? '是' : '否 ' }}</div>
                <el-radio-group v-else v-model="studentData.isPolitics">
                  <el-radio :label="1" style="height: 25px;">是</el-radio>
                  <el-radio :label="2" style="height: 25px;">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 其他信息 -->
      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>关联学生信息</span>
          </div>
        </template>
        <el-form :model="studentData" label-width="100px" :disabled="!editingSection.userInfoVo" :label-position="'top'" class="rowForm">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="身高">
                <el-input v-model="studentData.userInfoVo.sg" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="体重">
                <el-input v-model="studentData.userInfoVo.tz" placeholder="未填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="健康状态">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.userInfoVo.isPolitics === 1 ? '健康' : '不健康' }}</div>
                <el-radio-group v-else v-model="studentData.userInfoVo.healthState">
                  <el-radio :label="1" style="height: 25px;">健康</el-radio>
                  <el-radio :label="0" style="height: 25px;">不健康</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="婚姻状况">
                <div style="height: 25px;color: #cdd0d6" v-if="!editingSection.userInfoVo">{{ studentData.userInfoVo.isPolitics === 1 ? '已婚' : '未婚' }}</div>
                <el-radio-group v-else v-model="studentData.userInfoVo.maritalState">
                  <el-radio :label="1" style="height: 25px;">已婚</el-radio>
                  <el-radio :label="0" style="height: 25px;">未婚</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="家庭住址">
                <el-input v-model="studentData.userInfoVo.homeAddress" placeholder="未填写"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {get, post, put, del} from '@/api/request'
import {getTextByCode, getCodeByText, getDictOptions, getDictOptionsNumber} from '@/utils/dictionaryUtil';
import {toRaw} from 'vue'

// 默认头像，使用绝对路径
const defaultAvatar = new URL('@/assets/img/dfdnv.png', import.meta.url).href
const uploaderRef = ref()
const triggerUpload = () => {
  uploaderRef.value?.openUpload()
}


// 定义props接收父组件传来的数据
const props = defineProps({
  zuzhiId: {
    type: String,
    default: ''
  },
  rowId: {
    type: String,
    default: ''
  },

})

// 学生数据
const studentData = ref({
  "cardId": "",
  "category": '',
  "gender": '',
  "joinDate": "",
  "name": "",
  "parents": [
    {
      names: '父亲',
      "cardId": "",
      "cellPhone": "",
      "gender": 0,
      "gxlx": 0,
      "id": 0,
      "name": ""
    }
  ],
  "studentType": '',
  "userInfoVo": {
    xy: 0,
    fhl: 0,
    zysl: 0,
    yysl: 0,
    xl: 0,
    ydcs: 0,
    ydsc: 0,
    tzzs: 0,
    bmi: 0,
    "cardId": "",
    "cellPhone": "",
    "dataSources": 0,
    "departId": 0,
    "email": "",
    "facePhoto": "",
    "gender": 0,
    "gznx": 0,
    "healthState": 0,
    "homeAddress": "",
    "joinDate": "",
    "joinPartyDate": "",
    "maritalState": 0,
    "name": "",
    "nation": "",
    "nativePlace": "",
    "sg": 0,
    "sr": "",
    "tz": 0,
    "zzmm": 13
  },
  "userNo": "",
  "zkzh": "",
  dataSources: 10,//	数据来源 1-健康码平台 2-考勤平台 ；3-钉钉 ；10-智慧校园		true
  departId: props.zuzhiId,


  avatarUrl: '',
  address: {},
  healthInfo: {},
  guardianInfo: {
    guardians: []
  }
})


// 编辑数据的副本
const editingData = reactive({
  userInfoVo: {
    name: '',
    phone: '',
    idNumber: '',
    address: '',
    avatarUrl: ''
  },


  address: {},
  healthInfo: {},
  guardianInfo: {
    guardians: []
  }
})

// 控制编辑状态
const editingSection = reactive({
  userInfoVo: false,


  address: false,
  healthInfo: false,
  guardianInfo: false
})

// 开始编辑某个部分
const startEdit = (section) => {
  // // 深度复制数据到编辑副本
  // if (section === 'guardianInfo') {
  //   editingData[section] = {
  //     guardians: JSON.parse(JSON.stringify(studentData[section].guardians))
  //   }
  // } else {
  //   editingData[section] = JSON.parse(JSON.stringify(studentData[section]))
  // }
  editingSection[section] = true
}

// 保存编辑的部分
const saveSection = async (section) => {
  try {
    console.log(studentData.value)
    if (props.rowId) {
      // 编辑模式 - 调用编辑API
      await put(`/api/system/uit/edit`, toRaw(studentData.value))
      ElMessage.success('更新成功')
    } else {
      // 新增模式 - 调用新增API
      await post(`/api/system/uit/add`, toRaw(studentData.value))
      ElMessage.success('添加成功')
      editingSection[section] = false
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('保存失败')
  }


}

// 取消编辑
const cancelEdit = (section) => {
  editingSection[section] = false
  ElMessage.info('已取消编辑')
}
const fetchStudentData = async (studentId) => {
  try {
    const data = await get('/api/system/uit/get/' + studentId, {})
    if (data.rows) {
      studentData.value = data.rows
    }
    console.log(data.rows)
  } catch (error) {
    console.error('获取数据失败：', error)
  }
}

onMounted(() => {

  if (props.rowId) {
    fetchStudentData(props.rowId)
  } else {
    editingSection.userInfoVo = true
    // 如果没有传入rowId，初始化一个空的学生数据
    studentData.value = {
      ...studentData.value,
      userInfoVo: {
        ...studentData.value.userInfoVo,
        // facePhoto: "/api/uploadmodule/public/1926581005554884608/373c8c8b0397456faee4ba9d10e991f2.jpg" // 设置默认头像
      }
    }
  }
})

</script>

<style scoped lang="scss">
@import "@/assets/styles/userDefined.scss";

.student-info-container {
  //padding: 20px;
}

.student-header {
  display: flex;
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;
}

.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  width: 140px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #C9D8FF;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.update-avatar-btn {
  font-size: 14px;
  color: white;
  background: #00000066;
  width: 100%;
  height: 33px;
  border-radius: 0 0 10px 10px;
  text-align: center;
  padding: 5px;
}

.basic-header-info {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.basic-header-info h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.basic-header-info p {
  margin: 5px 0;
  color: #000;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-note {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
  margin-right: auto;
}

.guardian-item {
  //margin-bottom: 15px;
}
</style>

